<template>
    <div :class="[flag ? 'version-tree-a-flag' : '']" ref="versionTreeARef">
        <!-- 无子产品或者有子产品，不统一发版的  -->
        <HCollapse v-model:expanded="expanded" collapse @change="handleLoadData">
            <template #title>
                <flexbox style="color: #70798b">
                    <flexbox style="min-width: 400px">
                        <span class="font-w-b">{{ detail.versionNumber }} </span>
                        <span class="margin-l-8 font-w-b" v-if="signPostShowType === '3'">
                            {{ detail.pmpProductDetailDTO.systemName }}
                        </span>
                    </flexbox>
                    <flexbox style="flex: 1; white-space: nowrap; overflow: hidden" justify="center">
                        <span>{{ detail.startTime || '暂无' }}~{{ detail.onlineTime || '暂无' }}</span>
                    </flexbox>
                </flexbox>
            </template>
            <!-- 无子产品的或者有子产品，不统一发版的 -->
            <div style="padding-left: 4px" v-if="subVersionSystemList.length">
                <CommonTaskRequireList
                    :list="subVersionSystemList[0].pmpRequestInfos"
                    :disabled="disabled"
                    :versionDetail="subVersionSystemList[0]"
                    @success="handleLoadData"
                    v-if="subVersionSystemList[0].pmpRequestInfos.length"
                />
                <CommonProRequireList
                    :list="subVersionSystemList[0].pmpProductRequires"
                    :disabled="disabled"
                    :versionDetail="subVersionSystemList[0]"
                    @success="handleLoadData"
                    v-if="subVersionSystemList[0].pmpProductRequires.length"
                />
                <div style="padding: 0 16px" v-else>
                    <a-alert message="暂无数据" type="warning" show-icon />
                </div>
            </div>

            <template #titleExtra>
                <flexbox justify="flex-end" align="center" style="width: 100%; color: #333b4b" v-if="!disabled">
                    <flexbox class="margin-l-16" @click.stop="handleRemove">
                        <my-icon type="iconquxiaoguanlian" />
                        <span style="margin-left: 4px">移除</span>
                    </flexbox>
                </flexbox>
            </template>
        </HCollapse>
    </div>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import CommonProRequireList from '../components/CommonProRequireList.vue';
import CommonTaskRequireList from '../components/CommonTaskRequireList.vue';
import api from '@/api';
import { useMessage } from '@/hooks/common/useMessage';
import HCollapse from '../components/HCollapse.vue';
import { defineComponent, reactive, toRefs, ref, getCurrentInstance } from 'vue';
export default defineComponent({
    components: {
        HCollapse,
        CommonProRequireList,
        CommonTaskRequireList
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        },
        signPostShowType: {
            type: String,
            default: ''
        },
        subVersionInfo: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const instance: any = getCurrentInstance();
        const versionTreeARef = ref<any>({});
        const state = reactive<any>({
            subVersionSystemList: [],
            flag: false,
            expanded: false
        });
        const handleLoadData = async (expanded) => {
            if (expanded) {
                const query = {
                    versionNumber: props.detail.versionNumber,
                    catalogCode: props.detail.catalogCode
                };
                const { success, moule } = await api.versionModel.findByVerNoAndCatalogCode(query);
                if (success) {
                    state.subVersionSystemList = [...moule];
                }
            }
        };
        const handleSuccess = () => {
            emit('success');
        };
        // 更新展开接口
        instance.proxy.$mitt.on('taskRequireList-subVersionSystemList-loadData', () => {
            handleLoadData(true);
        });

        const handleRemove = () => {
            const { createConfirm } = useMessage();
            createConfirm({
                title: `确认移除${props.detail.versionNumber}版本？`,
                iconType: 'danger',
                onOk: async () => {
                    const query = {
                        ...props.detail,
                        parentId: null
                    };
                    const { success, errorMsg } = await api.versionControlModel.save(query);
                    if (success) {
                        message.success('移除成功');
                        emit('success');
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };

        return {
            versionTreeARef,
            ...toRefs(state),
            handleLoadData,
            handleSuccess,
            handleRemove
        };
    }
});
</script>
<style lang="less" scoped>
::v-deep(.ant-collapse-content > .ant-collapse-content-box) {
    padding-bottom: 2px !important;
}
.version-tree-a-flag {
    border: 1px dashed @primary-color;
}
</style>